<!-- markdown编辑器 -->
<template>
  <div ref="rootRef" class="ele-bytemd-wrap"></div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { Editor } from "bytemd";
import "bytemd/dist/index.min.css";

defineOptions({ name: "ByteMdEditor" });

const props = defineProps({
  /** 绑定值 */
  modelValue: {
    type: String,
    required: true,
  },
  /** 编辑器配置 */
  config: Object,
  /** 高度 */
  height: String,
  /** 全屏时的层级 */
  fullIndex: {
    type: Number,
    default: 999,
  },
});

const emit = defineEmits(["update:modelValue", "change"]);

/** 编辑器实例 */
let editor = null;

/** 根节点 */
const rootRef = ref(null);

// 渲染编辑器
onMounted(() => {
  const ins = new Editor({
    target: rootRef.value,
    props: Object.assign({}, props.config, { value: props.modelValue }),
  });
  ins.$on("change", (e) => {
    emit("update:modelValue", e.detail.value);
    emit("change", e.detail.value);
  });
  editor = ins;
});

// 更新配置
watch(
  () => props.config,
  (config) => {
    const option = Object.assign({}, config);
    Object.keys(option).forEach((key) => {
      if (typeof option[key] === "undefined") {
        delete option[key];
      }
    });
    editor?.$set?.(option);
  },
  { deep: true },
);

watch(
  () => props.modelValue,
  (value) => {
    editor?.$set?.({ value });
  },
);

defineExpose({ editor });
</script>

<style lang="scss" scoped>
.ele-bytemd-wrap {
  width: 100%;
  line-height: initial;
}

/* 修改编辑器高度 */
.ele-bytemd-wrap :deep(.bytemd) {
  height: v-bind(height);

  /* 修改全屏的zIndex */
  &.bytemd-fullscreen {
    z-index: v-bind(fullIndex);
  }

  /* 去掉默认的最大宽度限制 */
  .CodeMirror .CodeMirror-lines {
    max-width: 100%;
  }

  pre.CodeMirror-line,
  pre.CodeMirror-line-like {
    padding: 0 24px;
  }

  .markdown-body {
    max-width: 100%;
    padding: 16px 24px;
  }

  /* 去掉github图标 */
  .bytemd-toolbar-right > .bytemd-toolbar-icon:last-child {
    display: none;
  }
}
</style>
